<template>
  <div>
    <common-industry></common-industry>
    <ul class="dianpu_info">
      <li>
        <span class="hong">*</span><span class="jiacu">标题</span>
        <van-field
          v-model="storeTitle"
          name="store_title"
          placeholder="请输入标题"
          :rules="[{ required: true, pattern: hanzi , message: '请输入标题' }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">经营行业</span>
        <div class="liang_field iconfont icon-arrow-down" @click="postFilter()">
          <van-field name="store_category"  :rules="[{ required: true }]" :value="storeCategoryV"  readonly placeholder="点击选择行业"  />
          <van-field name="categoryclass" :value="categoryclassV" readonly />
        </div>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">意向区域</span>
        <div class="liang_field iconfont icon-arrow-down" @click="postCity()">
          <van-field name="city" :rules="[{ required: true }]" :value="cityV" readonly  placeholder="点击选择区域" />
          <van-field name="district" :value="districtV" readonly />
        </div>
      </li>
      <li v-if="is_storeCity">
        <span class="hong">*</span><span class="jiacu">优先区域</span>
        <div class="xiala_moli iconfont icon-arrow-down" @click="store_cityP=true">{{store_city}}</div>
        <van-field class="none"  v-model="store_cityV" name="store_city"/>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">面积范围</span>
        <van-field :rules="[{ required: true }]" :value="storeAreaV" placeholder="点击选择面积范围" readonly @click="storeAreaP=true" class="iconfont icon-arrow-down xiala"/>
        <van-field class="none" v-model="storeArea" name="store_area"/>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">租金预算</span>
        <div class="zu_liang">
          <van-field
            v-model="storeMoneyD"  :rules="[{ required: true }]"
            placeholder="租金下限"
            @blur = "storeMoneyChange" min="0" integer/>
            <div class="heng">-</div>
            <van-field
            v-model="storeMoneyX"  :rules="[{ required: true }]"
            placeholder="租金上限"
            @blur = "storeMoneyChange" min="0" integer/><div class="danwei">元/月</div>
            <van-field class="none"  v-model="storeMoneyV" name="store_money"/>
        </div>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">转让费</span>
        <van-field name="store_move_money" class="radio">
          <template #input>
            <van-radio-group v-model="radio"  direction="horizontal">
              <van-radio name="考虑" value="考虑">考虑</van-radio>
              <van-radio name="不考虑" value="不考虑">不考虑</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </li>
    </ul>
    <!-- 行业 -->
    <van-popup v-model="showstoreCategory" position="bottom">
      <van-picker
          show-toolbar
          :columns="CategoryL"
          @confirm="onstoreCategory"
          @cancel="showstoreCategory = false"
      />
    </van-popup>
    <!-- 区域 -->
    <van-popup v-model="showcity" position="bottom">
      <van-picker
          show-toolbar
          :columns="cityL"
          @confirm="onstoreCity"
          @cancel="showcity = false"
      />
    </van-popup>
    <!-- 面积范围 -->
    <van-popup v-model="storeAreaP" position="bottom">
      <van-picker
          show-toolbar
          :columns="storeAreaL"
          @confirm="onstoreArea"
          @cancel="storeAreaP = false"
      />
    </van-popup>
    <!-- 优先区域 -->
    <van-popup v-model="store_cityP" position="bottom">
      <div class="store_cityP_title zi_36">
        <div>优先区域<span class="zi_26 hui_6">（最多五个）</span></div>
        <div  @click="store_city_liC">确定</div>
      </div>
      <ul class="store_cityP_ul">
        <li v-for="(item, index) in storeCityL" @click="storeCityC(index)" :key="index" :class="{action:item.is_action}" :id="item.id">{{item.text}}</li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import CommonIndustry from '../../../common/industry'
export default {
  name: 'CompanyDianpuInfo',
  components: {
    CommonIndustry
  },
  props: {
    dataL: Object
  },
  data () {
    return {
      storeTitle: '',
      storeCategoryV: '',
      categoryclassV: '',
      showstoreCategory: false,
      CategoryL: [{}],
      industry: [],
      cityV: '',
      districtV: '',
      cityL: [{}],
      showcity: false,
      cityQ: [],
      store_cityV: '',
      storeCity: '',
      store_city: '',
      is_storeCity: false,
      storeCityL: [],
      storeAreaV: '',
      storeAreaL: [
        '20㎡以下',
        '20-50㎡',
        '50-100㎡',
        '100-200㎡',
        '200-500㎡',
        '500㎡以上'
      ],
      storeArea: '',
      storeAreaP: false,
      store_cityP: false,
      radio: '考虑',
      storeMoneyD: '',
      storeMoneyX: '',
      storeMoneyV: 0,
      is_storeCityS: 0,
      hanzi: /[\u4e00-\u9fa5]/
    }
  },
  watch: {
    'dataL': function (dataL) {
      this.storeTitle = this.dataL.store_title
      this.storeCategoryV = this.dataL.store_category
      this.categoryclassV = this.dataL.categoryclass
      this.cityV = this.dataL.store_quyu.split('/')[0]
      this.districtV = this.dataL.store_quyu.split('/')[1]
      if (this.dataL.store_city !== '') {
        this.is_storeCity = true
        this.store_city = this.dataL.store_city
      }
      this.storeArea = this.dataL.store_area
      if (this.storeArea === '0-20') {
        this.storeAreaV = '20㎡以下'
      } else if (this.storeArea === '20-50') {
        this.storeAreaV = '20-50㎡'
      } else if (this.storeArea === '50-100') {
        this.storeAreaV = '50-100㎡'
      } else if (this.storeArea === '100-200') {
        this.storeAreaV = '100-200㎡'
      } else if (this.storeArea === '200-500') {
        this.storeAreaV = '200-500㎡'
      } else if (this.storeArea === '500-100000000') {
        this.storeAreaV = '500㎡以上'
      }
      this.storeMoneyD = this.dataL.store_money.split('-')[0]
      this.storeMoneyX = this.dataL.store_money.split('-')[1]
      this.storeMoneyV = this.dataL.store_money
      this.radio = this.dataL.store_move_money
    }
  },
  methods: {
    storeCityC (index) {
      if (this.storeCityL[index].is_action) {
        this.is_storeCityS = this.is_storeCityS - 1
        this.$set(this.storeCityL[index], 'is_action', false)
      } else {
        if (this.is_storeCityS < 5) {
          this.is_storeCityS = this.is_storeCityS + 1
          this.$set(this.storeCityL[index], 'is_action', true)
        } else {
          this.$toast('最多选择5个')
        }
      }
    },
    store_city_liC () {
      this.store_cityP = false
      this.store_cityV = ''
      this.store_city = ''
      for (var i = 1; i < this.storeCityL.length; i++) {
        if (this.storeCityL[i].is_action) {
          if (this.store_city === '') {
            this.store_city = this.storeCityL[i].text
            this.store_cityV = this.storeCityL[i].text
          } else {
            this.store_city += '/' + this.storeCityL[i].text
            this.store_cityV += ',' + this.storeCityL[i].text
          }
        }
      }
    },
    storeMoneyChange () {
      let num = /^(0|[1-9][0-9]*)$/
      if (!num.test(this.storeMoneyD) && !num.test(this.storeMoneyX)) {
        this.$toast('请输入正确的租金')
      } else {
        if (this.storeMoneyD !== '' && this.storeMoneyX !== '') {
          if (this.storeMoneyX * 1 < this.storeMoneyD * 1) {
            this.$toast('最小租金不能大于等于最大租金')
          } else {
            this.storeMoneyV = this.storeMoneyD + '-' + this.storeMoneyX
          }
        }
      }
    },
    postFilter () {
      this.showstoreCategory = true
      if (this.CategoryL.length < 2) {
        this.industry = this.$store.state.industry
        for (var i = 0; i < this.industry.length; i++) {
          this.CategoryL[i] = {}
          this.$set(this.CategoryL[i], 'id', this.industry[i].region_id)
          this.$set(this.CategoryL[i], 'text', this.industry[i].name)
          this.$set(this.CategoryL[i], 'children', [])
          for (var k = 0; k < this.industry[i].children.length; k++) {
            this.CategoryL[i].children[k] = {}
            this.$set(this.CategoryL[i].children[k], 'id', this.industry[i].children[k].region_id)
            this.$set(this.CategoryL[i].children[k], 'text', this.industry[i].children[k].name)
          }
        }
      }
    },
    postCity () {
      this.showcity = true
      if (this.cityL.length < 2) {
        this.cityQ = this.$store.state.city
        for (var i = 0; i < this.cityQ.length; i++) {
          this.cityL[i] = {}
          this.$set(this.cityL[i], 'id', this.cityQ[i].id)
          this.$set(this.cityL[i], 'text', this.cityQ[i].name)
          this.$set(this.cityL[i], 'children', [])
          this.cityL[i].children[0] = {}
          this.$set(this.cityL[i].children[0], 'id', '0')
          this.$set(this.cityL[i].children[0], 'text', '不限')
          for (var k = 1; k < this.cityQ[i].children.length; k++) {
            this.cityL[i].children[k] = {}
            this.$set(this.cityL[i].children[k], 'id', this.cityQ[i].children[k].id)
            this.$set(this.cityL[i].children[k], 'text', this.cityQ[i].children[k].name)
          }
        }
      }
    },
    onstoreCategory (value) {
      this.storeCategoryV = value[0]
      this.categoryclassV = value[1]
      this.showstoreCategory = false
    },
    onstoreArea (value) {
      if (value === '20㎡以下') {
        this.storeArea = '0-20'
      } else if (value === '20-50㎡') {
        this.storeArea = '20-50'
      } else if (value === '50-100㎡') {
        this.storeArea = '50-100'
      } else if (value === '100-200㎡') {
        this.storeArea = '100-200'
      } else if (value === '200-500㎡') {
        this.storeArea = '200-500'
      } else if (value === '500㎡以上') {
        this.storeArea = '500-100000000'
      }
      this.storeAreaV = value
      this.storeAreaP = false
    },
    onstoreCity (value, index) {
      this.cityV = value[0]
      this.districtV = value[1]
      if (this.districtV === '不限') {
        this.is_storeCity = true
        this.storeCityL = this.cityL[index[0]].children
      } else {
        this.is_storeCity = false
      }
      this.showcity = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.dianpu_info
  width 100%
  height auto
  box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
  border-radius .1rem /* 5/50 */
  padding 0 .3rem /* 15/50 */
  padding-bottom .5rem /* 25/50 */
  li
    width:100%
    font-size .26rem /* 13/50 */
    padding-top .5rem /* 25/50 */
    .hong
      font-size .22rem /* 11/50 */
      color #F6360A
    .van-field
      width 100%
      height 1rem /* 50/50 */
      line-height .8rem
      border 1px solid rgba(0,0,0,.1)
      border-radius .1rem /* 5/50 */
      position relative
      margin-top .3rem /* 15/50 */
      padding .1rem /* 5/50 */ .3rem /* 15/50 */
      /deep/ .van-picker__confirm
        color #333
    .van-field:after
      border-bottom:0
    .van-field.xiala
      background #f8f8f8
      border 0px
    .iconfont:before
      position absolute
      right .3rem /* 15/50 */
      z-index 999
    .liang_field
      width 100%
      background #f8f8f8
      border-radius .1rem /* 5/50 */
      display flex
      margin-top .3rem /* 15/50 */
      position relative
      .van-field
        border 0px
        background-color transparent
        margin-top 0px
    .xiala_moli
      width 100%
      height 1rem
      line-height .8rem
      position relative
      background #f8f8f8
      border-radius .1rem /* 5/50 */
      margin-top .3rem /* 15/50 */
      padding: 0.1rem /* 5/50 */ 0.3rem /* 15/50 */
      font-size .3rem /* 15/50 */
    .liang_field.iconfont:before
      line-height 1rem
    .zu_liang
      display flex
      line-height 1rem /* 50/50 */
      margin-top .4rem
      font-size .26rem /* 13/50 */
      .van-field
        width 43%
        margin-top 0px
      .heng
        width 3%
        text-align center
      .danwei
        width 15%
        text-align right
    .radio
      border 0rem /* 0/50 */
      margin-top 0px
    .van-radio-group
      width 100%
      margin-top .4rem
      .van-radio
        width 50%
        height .5rem /* 15/50 */
        line-height .5rem /* 15/50 */
        font-size .32rem /* 16/50 */
        margin-right 0px
        /deep/ .van-radio__icon
          height .36rem
          width .36rem
          .van-icon
            width .26rem /* 13/50 */
            height .26rem /* 13/50 */
        /deep/ .van-radio__icon--checked .van-icon
          background linear-gradient(90deg, #F14510, #EE340F)
          box-shadow 0px 0px 3px 0px rgba(255, 1, 1, 0.42)
          border 0px
        /deep/ .van-icon-success::before
          content: ""
.van-popup
  .store_cityP_title
    display flex
    align-items center
    justify-content space-between
    width 100%
    height 1rem /* 50/50 */
    line-height 1rem /* 50/50 */
    padding:0 .4rem /* 20/50 */
  .store_cityP_ul
    width 100%
    max-height 5.8rem /* 290/50 */
    overflow auto
    text-align center
    li
      width 100%
      height .88rem /* 44/50 */
      line-height .88rem /* 44/50 */
      font-size .3rem /* 15/50 */
    .action
      color #F6360A
    li:nth-child(1)
      display none
</style>
